<template>
  <Page :show-nav-bar="false" v-slot:default="{contentClass}">
    <div :class="contentClass">
      <LoadingBox v-if="pageLoading" class="w-40 h-40 absolute mt-8" style="z-index: 1; left: calc((100% - 10rem)/2)">
        <span>加载中...</span>
      </LoadingBox>

      <div v-else class="flex flex-col items-center justify-center">
        <div class="flex justify-center items-center" style="height: 85vh;">
          <van-image :src="posterUrl" width="16rem"></van-image>
        </div>
        <div class="fixed bottom-0 pb-3 h-1/6 m-auto">
          <div class="mt-8">恭喜您获得分销资格，请长按保存图片</div>
          <div class="text-sm text-gray-500">每推广一位好友下单，您立即获得<span class="text-red-600">{{activity.commision_config.money}}</span>元收益</div>
        </div>
      </div>

    </div>
  </Page>
</template>

<script setup>
import {ref} from 'vue';
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import Page from "../components/Page.vue"
import {computed, onMounted, watch} from "vue";

import apis from '../apis'
import app from "../configs/app";

const store = useStore()
const router = useRouter()
const route = useRoute()

const activity = ref(null)
const posterUrl = ref()

import LoadingBox from "../components/LoadingBox.vue";

const createPoster = async () => {
  let poster_url = window.location.origin + location.pathname.substr(0, location.pathname.length-1) + (app.history=='history'?'':'/#') + '/?activity_id=' + activity.value.id
  poster_url = encodeURIComponent(poster_url)
  return await apis.poster.show({
    params: {
      activity_id: route.query.activity_id,
      poster_url,
    }
  }).then(({data: result})=>{
    posterUrl.value = result.data
  })
}

const pageLoading = ref(true)
onMounted(async () => {
  await apis.activity.show({
    params: {
      id: route.query.activity_id,
    }
  }).then(({data: result}) => {
    activity.value = result.data
  })
  await createPoster()
  pageLoading.value = false
})
</script>

<style scoped>

</style>